<!-- General infos -->
<section aria-labelledby="account-heading">
    <.form let={f} for={@infos_changeset} action={Routes.user_settings_path(@conn, :update_account)}>
        <div class="shadow sm:overflow-hidden sm:rounded-md">
            <div class="bg-white px-4 py-6 sm:p-6">
                <h2 id="account-heading" class="text-lg font-medium leading-6 text-gray-900">Account infos</h2>
                <p class="mt-1 text-sm text-gray-500">
                    Find out some account details here you can update. They are just here for you and us, to better understand each other. Nothing sneaky!<br>
                    Update your account details here 👇️
                </p>
                <div class="mt-6 grid grid-cols-4 gap-6">
                    <div class="col-span-4 sm:col-span-2">
                        <%= label f, :name, class: "block text-sm font-medium leading-6 text-gray-900" %>
                        <%= text_input f, :name, placeholder: "John Doe", required: true, class: "mt-2 block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" %>
                        <%= error_tag f, :name %>
                    </div>
                    <div class="col-span-4 sm:col-span-2">
                        <%= label f, :avatar, class: "block text-sm font-medium leading-6 text-gray-900" %>
                        <%= text_input f, :avatar, placeholder: "Image url, ex: https://...", required: true, class: "mt-2 block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" %>
                        <%= error_tag f, :avatar %>
                    </div>
                    <!-- <div class="col-span-4 sm:col-span-2">
                        <%= label f, :company, class: "block text-sm font-medium leading-6 text-gray-900" %>
                        <%= text_input f, :company, placeholder: "Azimutt", class: "mt-2 block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" %>
                        <%= error_tag f, :company %>
                    </div>
                    <div class="col-span-4 sm:col-span-2">
                        <%= label f, :location, class: "block text-sm font-medium leading-6 text-gray-900" %>
                        <%= text_input f, :location, placeholder: "Paris, France", class: "mt-2 block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" %>
                        <%= error_tag f, :location %>
                    </div>
                    <div class="col-span-4">
                        <%= label f, :description, "Your bio", class: "block text-sm font-medium leading-6 text-gray-900" %>
                        <%= textarea f, :description, placeholder: "Senior Software Engineer at Azimutt", rows: 4, class: "mt-2 block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" %>
                        <%= error_tag f, :description %>
                    </div> -->
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
                <%= submit "Save", class: "inline-flex justify-center rounded-md bg-gray-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900" %>
            </div>
        </div>
    </.form>
</section>

<!-- Email address -->
<%= if @user.hashed_password do %>
    <section aria-labelledby="email-address-heading">
        <.form let={f} for={@email_changeset} action={Routes.user_settings_path(@conn, :update_email)}>
            <div class="shadow sm:overflow-hidden sm:rounded-md">
                <div class="bg-white px-4 py-6 sm:p-6">
                    <h2 id="email-address-heading" class="text-lg font-medium leading-6 text-gray-900">Your email address</h2>
                    <p class="mt-1 text-sm text-gray-500">
                        Your email address is the primary identification for an account, change it wisely.<br>
                        The change will be effective only when you confirm it.
                    </p>
                    <div class="mt-6 grid gap-6">
                        <div>
                            <%= label f, :email, "Your email", class: "block text-sm font-medium leading-6 text-gray-900" %>
                            <%= email_input f, :email, autocomplete: "email", placeholder: "your@email.com", required: true, class: "mt-2 block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" %>
                            <%= error_tag f, :email %>
                        </div>
                        <div>
                            <%= label f, :current_password, "Confirm your password", class: "block text-sm font-medium leading-6 text-gray-900" %>
                            <%= password_input f, :current_password, placeholder: "You know it, don't you?", required: true, class: "mt-2 block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" %>
                            <%= error_tag f, :current_password %>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
                    <%= submit "Change email", class: "inline-flex justify-center rounded-md bg-gray-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900" %>
                </div>
            </div>
        </.form>
    </section>
<% else %>
    <section aria-labelledby="email-address-social-heading">
        <div class="shadow sm:overflow-hidden sm:rounded-md">
            <div class="bg-white px-4 py-6 sm:p-6">
                <h2 id="email-address-social-heading" class="text-lg font-medium leading-6 text-gray-900">Your email address</h2>
                <div class="mt-6 grid gap-6">
                    <div>
                        <label for="social-email" class="block text-sm font-medium leading-6 text-gray-900">Your email</label>
                        <input type="email" name="email" id="social-email" value={@user.email} disabled class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm sm:leading-6" />
                        <p class="mt-1 text-sm text-gray-500">Your email is from your <b><%= @user.provider %> account</b>, set a password if you want to change it.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
<% end %>

<!-- Password -->
<%= if Azimutt.config(:auth_password) do %>
    <%= if @user.hashed_password do %>
        <section aria-labelledby="password-heading">
            <.form let={f} for={@password_changeset} action={Routes.user_settings_path(@conn, :update_password)}>
                <div class="shadow sm:overflow-hidden sm:rounded-md">
                    <div class="bg-white px-4 py-6 sm:p-6">
                        <h2 id="password-heading" class="text-lg font-medium leading-6 text-gray-900">Change your password</h2>
                        <div class="mt-6 grid gap-6">
                            <div>
                                <%= label f, :current_password, "Current password", class: "block text-sm font-medium leading-6 text-gray-900" %>
                                <%= password_input f, :current_password, placeholder: "You know it, don't you?", required: true, class: "mt-2 block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" %>
                                <%= error_tag f, :current_password %>
                            </div>
                            <div>
                                <%= label f, :password, "New password", class: "block text-sm font-medium leading-6 text-gray-900" %>
                                <%= password_input f, :password, placeholder: "Choose a strong, 12+ chars password.", required: true, class: "mt-2 block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" %>
                                <%= error_tag f, :password %>
                            </div>
                            <div>
                                <%= label f, :password_confirmation, "New password again", class: "block text-sm font-medium leading-6 text-gray-900" %>
                                <%= password_input f, :password_confirmation, placeholder: "Make sure you haven't made a typo...", required: true, class: "mt-2 block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" %>
                                <%= error_tag f, :password_confirmation %>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
                        <%= submit "Change password", class: "inline-flex justify-center rounded-md bg-gray-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900" %>
                    </div>
                </div>
            </.form>
        </section>
    <% else %>
        <section aria-labelledby="set-password-heading">
            <.form let={f} for={:user} action={Routes.user_settings_path(@conn, :set_password)}>
                <div class="shadow sm:overflow-hidden sm:rounded-md">
                    <div class="bg-white px-4 py-6 sm:p-6">
                        <h2 id="set-password-heading" class="text-lg font-medium leading-6 text-gray-900">Set a password</h2>
                        <p class="mt-1 text-sm text-gray-500">
                            You signed up with <b><%= @user.provider %></b>, you don't need a password.
                            You can still create one if you want to login with your email/password instead.
                        </p>
                        <div class="mt-6 grid gap-6">
                            <div>
                                <%= label f, :password, "Your password", class: "block text-sm font-medium leading-6 text-gray-900" %>
                                <%= password_input f, :password, placeholder: "Choose a strong, 12+ chars password.", required: true, class: "mt-2 block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" %>
                                <%= error_tag f, :password %>
                            </div>
                            <div>
                                <%= label f, :password_confirmation, "Your password again", class: "block text-sm font-medium leading-6 text-gray-900" %>
                                <%= password_input f, :password_confirmation, placeholder: "Make sure you haven't made a typo...", required: true, class: "mt-2 block w-full rounded-md border-0 px-3 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-900 sm:text-sm sm:leading-6" %>
                                <%= error_tag f, :password_confirmation %>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
                        <%= submit "Set your password", class: "inline-flex justify-center rounded-md bg-gray-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900" %>
                    </div>
                </div>
            </.form>
        </section>
    <% end %>
<% end %>

<% auth_methods = [
    if(@user.hashed_password, do: %{provider: "password", id: @user.email}, else: nil),
    if(@user.provider, do: %{provider: @user.provider, id: @user.provider_uid}, else: nil)
] |> Enum.filter(fn m -> m != nil end) %>
<%= if auth_methods |> length > 1 do %>
    <section aria-labelledby="auth-methods-heading">
        <div class="shadow sm:overflow-hidden sm:rounded-md">
            <div class="bg-white px-4 py-6 sm:p-6">
                <h2 id="auth-methods-heading" class="text-lg font-medium leading-6 text-gray-900">Your configured auth methods</h2>
                <%= for method <- auth_methods do %>
                    <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5">
                        <dt class="text-sm font-medium text-gray-500 uppercase"><%= method.provider %></dt>
                        <dd class="mt-1 flex text-sm text-gray-900 sm:col-span-2 sm:mt-0">
                            <span class="flex-grow"><%= method.id %></span>
                            <span class="ml-4 flex-shrink-0">
                                <%= link "Remove", title: "Remove #{method.provider} auth", to: Routes.user_settings_path(@conn, :remove_provider, method.provider), method: :delete, class: "inline-flex justify-center rounded-md bg-gray-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900" %>
                            </span>
                        </dd>
                    </div>
                <% end %>
            </div>
        </div>
    </section>
<% end %>

<section aria-labelledby="auth-tokens-social-heading">
    <div class="shadow sm:overflow-hidden sm:rounded-md">
        <div class="bg-white px-4 py-6 sm:p-6">
            <h2 id="auth-tokens-social-heading" class="text-lg font-medium leading-6 text-gray-900">Your authentication tokens</h2>
            <p class="text-sm text-gray-500">
                Authentication tokens allows to identify you without a password.
                This is useful for API calls to avoid the login/password flow, send them in your request in `auth-token` parameter, and it will grant you your accesses.
            </p>
            <div class="mt-3 -space-y-px">
                <%= for {token, index} <- Enum.with_index(@auth_tokens) do %>
                    <div class={"#{if index == 0, do: "rounded-t-md"} border-gray-300 border flex items-center"}>
                        <div class="grow px-3 py-2">
                            <p class="text-gray-900 text-sm font-medium"><%= token.name %> (<%= if token.expire_at == nil do %>does not expire<% else %>expire on <%= format_datetime(token.expire_at) %><% end %>)</p>
                            <p class="mt-1 truncate text-xs leading-5 text-gray-500"><%= token.nb_access %> access since its creation on <%= format_datetime(token.created_at) %><%= if token.last_access != nil do %>, last accessed on <%= format_datetime(token.last_access) %><% end %>.</p>
                        </div>
                        <div>
                            <p class="px-2 py-1 border border-gray-300 shadow-sm rounded text-sm leading-relaxed overflow-auto bg-gray-100 text-gray-100 hover:text-gray-700"><%= token.id %></p>
                        </div>
                        <%= link(title: "Delete auth token", to: Routes.user_settings_path(@conn, :delete_auth_token, token.id), method: :delete) do %>
                            <Icon.trash class="mx-2 text-gray-300" />
                        <% end %>
                    </div>
                <% end %>
                <.form let={f} for={@auth_token_changeset} action={Routes.user_settings_path(@conn, :create_auth_token)}>
                    <div class="flex -space-x-px">
                        <div class="min-w-0 w-1/2 flex-1">
                            <%= label f, :name, "Token name", class: "sr-only" %>
                            <%= text_input f, :name, placeholder: "Token name", required: true, class: "#{if length(@auth_tokens) == 0, do: "rounded-tl-md"} rounded-bl-md relative block w-full border border-gray-300 bg-transparent focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" %>
                            <%= error_tag f, :name %>
                        </div>
                        <div class="min-w-0">
                            <%= label f, :expire_at, "Expiration", class: "sr-only" %>
                            <%= select f, :expire_at, ["does not expire": "none", "expire in 1 hour": "hour", "expire in 1 day": "day", "expire in 1 month": "month"], class: "relative block w-full border border-gray-300 bg-transparent focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" %>
                            <%= error_tag f, :expire_at %>
                        </div>
                        <%= submit "Create token", class: "#{if length(@auth_tokens) == 0, do: "rounded-tr-md"} rounded-br-md relative block border border-gray-300 px-4 py-2 text-sm font-medium bg-gray-50 text-gray-700 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:bg-gray-100 disabled:text-gray-400" %>
                    </div>
                </.form>
            </div>
        </div>
    </div>
</section>
